
<template>
  <div id="app">
    <el-container>
      <el-header class="main-header"></el-header>
      <el-main class="main-main">
        <el-card class="box-card">
          <el-container>
            <el-header class="body-header">
              <span class="article-title" font-family="Microsoft YaHei">{{articleData.title}}</span>
              <br>
              <br>
              <div class="article-time">
                <span>{{articleData.author}}</span>
                <span>{{articleData.madeTime}}</span>
              </div>
            </el-header>
            <br>
            <br>
            <p></p>
            <el-main class="body-main">
              <template>
                <div>
                  <mavon-editor
                    class="md"
                    :value="articleData.editorial"
                    :subfield="prop.subfield"
                    :defaultOpen="prop.defaultOpen"
                    :toolbarsFlag="prop.toolbarsFlag"
                    :editable="prop.editable"
                    :scrollStyle="prop.scrollStyle"
                  ></mavon-editor>
                </div>
              </template>
            </el-main>
          </el-container>
        </el-card>
      </el-main>
      <el-footer class="main-footer">感谢陈玉峰的全力开发</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "app",
computed: {
        prop () {
          let data = {
            subfield: false,// 单双栏模式
            defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域 
            editable: false,
            toolbarsFlag: false,
            scrollStyle: true
          }
          return data
        }
      },
  data() {
    return {
      // articleDetail: [], //数据，可以从数据库中读取
      articleData: [] //接收从前一个页面传过来的数据
    };
  },
  methods: {
    //获得从文章列表跳转页面传过来的文章详情
    getParams() {
      this.articleData = JSON.parse(this.$route.query.data);
      var dateee = new Date(this.articleData.madeTime).toJSON();
      var date = new Date(+new Date(dateee) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
      this.articleData.madeTime = date;
      // console.log(this.articleData);
    }
  },

  created() {
    this.getParams();
  }
};
</script>

<style scoped>
.main-header,
.main-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.main-main {
  background-color: #ffffff;
  /* color: #333; */
  /* text-align: center; */
  /* line-height: 160px; */
  text-align: left;
  margin-left: 20%;
  margin-right: 20%;
}
/* 内容的css */
.body-header {
  background-color: #ffffff;
  color: #000000;
  text-align: center;
  line-height: 30px;
  font-family: "Microsoft YaHei";
}
.article-time {
  text-align: right;
}
.article-title {
  font-size: 35px;
}

.body-main {
  background-color: #ffffff;
  color: #000000;
  text-align: left;
}
/* 下面是卡片css */
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
}
</style>